<template>
	<view class="container">
		<!-- 城市 -->
		<u-navbar class="wd-navbar" :is-back="false" :border-bottom="false" :background="{ background: '#ffffff' }">
			<view class="wd-navbar-down" @click="popupShow = !popupShow">
				<u-icon :name="popupShow?'arrow-up':'arrow-down'" color="#333" size="28"
					:label="currentCity?currentCity.name:''" label-color="#333" label-size="28" label-pos="left"
					margin-right="8"></u-icon>
			</view>
		</u-navbar>
		<!-- 城市选择弹窗 -->
		<u-popup v-model="popupShow" mode="top" z-index="970" border-radius="24" :custom-style="{top: tabsTop+'rpx'}"
			height="60%">
			<view class="down-menu">
				<view class="down-menu-cell" :class="{'disabled':item.disabled}" v-for="(item,index) in cityList"
					:key="index" @click="cityChange(index)">
					<view class="title" :class="{'active':currentCity&&currentCity.id==item.id}">{{ item.name }}</view>
				</view>
			</view>
		</u-popup>
		<!-- 日期 -->
		<wd-calendar-week @click="weekClick"></wd-calendar-week>
		<!-- 门店 -->
		<u-tabs style="margin-top: 60rpx;" :list="shopList" :current="current" @change="changeMd"></u-tabs>
		<!-- 标题 -->
		<view class="list_box">
			<view :class="indexTab == index ? 'tabSelect' : 'tab'" v-for="(item,index) in titleList" :key="index"
				@tap="clickTab(item, index)">{{item.name}}</view>
		</view>
		<!-- 列表 -->
		<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback">
			<view class="class-list">
				<view class="class-list-card" v-for="(item,index) in dataList" :key="index">
					<view class="class-list-item">
						<view class="class-list-item__avatar">
							<image class="avatar" :src="item.course.image" mode="aspectFill"></image>
							<view class="label">预约</view>
							<view class="number" @click="dropSwitch(index)">
								<text>{{item.appoint_count}}</text>/{{ item.course.people_count }} <u-icon class="arrow"
									:name="item.isSelected?'arrow-down':'arrow-up'" color="#D7D7D7" size="18"></u-icon>
							</view>
						</view>
						<view class="class-list-item__content">
							<view class="title">{{item.course.name}}</view>
							<view class="star">难易度：<u-rate :current="item.course.degree" :disabled="true"
									inactive-icon="star-fill" inactive-color="#DFDFDF" active-color="#F5C822" size="24"
									gutter="6"></u-rate></view>
							<view class="info">教练：{{item.teacher.name}}</view>
							<view class="info">教室：{{item.classroom.name}}</view>
							<view class="info" v-if="item.check_status == 3">时间：{{ item.change_time }}</view>
							<view class="info" v-else>时间：{{ item.start_time }}-{{item.end_time}}</view>
						</view>
						<view class="class-list-item__action">
							<view class="button" v-if="item.status != 1" :class="{'active':item.status}"
								@click="link(item.id)">{{item.my_appointment_count>0?'已预约':'预约'}}</view>
							<view class="" style="width: 110rpx;height: 54rpx;background: linear-gradient(131deg, #606266 0%, #606266 100%);border-radius: 99px;text-align: center;line-height: 54rpx;font-size: 24rpx;font-weight: 400;
		color: #FFFFFF;" v-else-if="item.status == 1" :class="{'title':item.status}">
								{{item.my_appointment_count>0?'已预约':'已结束'}}
							</view>

						</view>
					</view>
					<view class="class-list-user" v-if="item.appointment.length>0 && item.isSelected">
						<view class="title">已预约上课的学员</view>
						<view class="thumb-box">
							<image class="thumb" v-for="(img,idx) in item.appointment" :key="idx" :src="img.avatar"
								mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- mescroll-body end -->
		<!-- <u-tabs :list="tabsList" @click="clickTab"></u-tabs> -->
		<!-- <mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="venue-cell" v-for="(item, index) in dataList" :key="item.id">
				
				<view class="wd-flex venue-list" @click="shopDetail(item.id)">
					<image class="thumb" :src="item.image" mode="aspectFill"></image>
					<view class="wd-flex-cell">
						<view class="title">{{ item.name }}</view>
						<view class="info">{{ item.mobile }}</view>
						<view class="info">{{ item.Area.province }}{{ item.Area.city }}{{ item.Area.region }}{{ item.detail }}</view>
					</view>
				</view>
			</view>
		</mescroll-body> -->
		<!-- mescroll-body end -->
		<!-- 底部导航栏 start -->
		<u-tabbar class="wd-tabbar" iconSize="44" :list="wd_tabbar"></u-tabbar>
		<!-- 底部导航栏 end -->
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const app = getApp();
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				current: 0,
				currentCity: null,
				tabsTop: '68',
				//城市
				cityList: [],
				titleList: [],
				currentShop: null,
				shop: '',
				indexTab: 0,
				dataList: [],
				shopId: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 99 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '../../../../static/images/icon_empty-class.png',
						tip: '当天暂无课程安排哦'
					}
				},
				num: 1,
				size: 10,
				popupShow: false,
				date: '',
				shopList: [],
				categoryId: 0,
				// cityId: 0,
			}
		},
		onLoad() {
			this.$utils.getAllCities(false).then(data => {
				this.cityList = data;
			});
			this.currentCity = this.$core.getCurrentCity();
			this.fetchCategory();
			let that = this;
			uni.$on(app.globalData.event.cityChange, function(city) {
				that.currentCity = city;
				// that.mescroll.resetUpScroll()
			})
		},
		onUnload() {
			uni.$off(app.globalData.event.cityChange, this);
		},
		onShareAppMessage() {
			let user = this.$core.getUserinfo();
			let path = "/pages/tabbar/shop/shop"
			if (user) {
				path += '?pid=' + user.id;
			}
			return {
				title: app.shareConfig.shareTitle,
				path: path,
				imageUrl: app.shareConfig.shareImage
			}
		},
		onShareTimeline() {
			let query = '';
			let user = this.$core.getUserinfo();
			if (user) {
				query = 'pid=' + user.id;
			}
			return {
				title: app.shareConfig.shareTitle,
				query: query,
			}
		},
		methods: {
			// 去详情
			link(id) {
				this.$utils.href('/pages/class/classDetail/classDetail?course_id=' + id)
			},
			// 获取门店
			getShopList() {
				let that = this
				that.$core.post({
					url: 'fitness.shop/lists',
					loading: false,
					data: {
						// cityId: that.city_id,
						page: 1,
						pagesize: 10000
					},
					success: (ret) => {
						that.shopList = ret.data.data
						that.shopId = that.shopList[0].id
						that.upCallback()
					}
				});
			},
			changeMd(e) {
				this.current = e
				that.shopId = that.shopList[e].id
				this.upCallback()
			},
			//切换日期
			weekClick(date) {
				this.date = date;
				this.upCallback()
			},
			// 切换城市
			cityChange(index) {
				this.$core.setCurrentCity({
					id: this.cityList[index].id,
					name: this.cityList[index].name
				});
				this.popupShow = false
				this.getShopList()
			},
			//切换标签
			clickTab(item, index) {
				this.indexTab = index
				this.categoryId = this.titleList[index].id
				this.upCallback()
			},
			//获取分类
			fetchCategory() {
				this.$core.get({
					url: 'fitness.common/category',
					loading: false,
					data: {
						shop_id: 0,
					},
					success: (ret) => {
						this.titleList = ret.data;
						this.categoryId = this.titleList[0].id
						this.getShopList()
					}
				});
			},
			/*上拉加载的回调*/
			upCallback() {
				let data = {
					shop_id: this.shopId,
					course_category_id: this.categoryId,
					date: this.date,
					page: 1,
					pagesize: 99
				}
				console.log(data, 'data')
				this.$core.post({
					url: 'fitness.course_arrangement/lists',
					loading: false,
					data: data,
					success: (ret) => {
						this.dataList = []; //如果是第一页需手动制空列表
						this.dataList = this.dataList.concat(ret.data.data); //追加新数据
						this.mescroll.endSuccess(ret.data.data.length);
					}
				});
			},
			/*上拉加载的回调*/
			// upCallback() {
			// 	var _this = this;
			// 	_this.$core.post({
			// 		url: 'fitness.shop/lists',
			// 		loading: false,
			// 		data: {
			// 			page: _this.num,
			// 			pagesize: _this.size
			// 		},
			// 		success: (ret) => {
			// 			console.log(ret, '------ret-------')
			// 			if (_this.num == 1) _this.dataList = []; //如果是第一页需手动制空列表
			// 			_this.dataList = _this.dataList.concat(ret.data.data); //追加新数据
			// 			_this.mescroll.endSuccess(ret.data.data.length);
			// 		}
			// 	});
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.wd-navbar-down {
		padding: 10rpx 24rpx;
	}

	.tabs-fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;
		width: 100%;
		// height: 238rpx;
		background: #FFFFFF;

		/deep/ .u-tabs {
			border-radius: 0 0 24rpx 24rpx;
		}
	}

	.down-menu {
		margin-top: 100rpx;
		background: #FFFFFF;

		&-cell {
			display: flex;
			align-items: center;
			border-top: 1rpx #EDEDED solid;
			padding: 24rpx;

			&:first-child {
				border-top: 0;
			}

			.title {
				flex: 1;
				line-height: 38rpx;
				font-size: 26rpx;
				color: #333333;
				overflow: hidden;

				&.active {
					color: #6D4BBE;
				}
			}

			&.disabled .title {
				color: #999999;
			}

			.action {
				display: block;
				border: 1rpx #E1E1E1 solid;
				padding: 0 22rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				color: #333333;
				border-radius: 99px;
			}
		}
	}

	.hdClass {
		height: 300rpx;
		width: 94%;
		margin: 0 auto;

		.hdClass_heard {
			height: 80rpx;
			width: 94%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			line-height: 80rpx;
			font-size: 40rpx;
			font-weight: 700;

			// color: #6D4BBE;
			>view:last-child {
				font-size: 32rpx;
				font-weight: 400;
				// color: #0000009c;
				color: #6D4BBE;
			}
		}

		.hdClass_content {
			height: 220rpx;
			width: 100%;
			border-radius: 10rpx;

			>image {
				height: 220rpx;
				width: 100%;
				border-radius: 10rpx;
			}
		}
	}

	.down-menu {
		background: #FFFFFF;

		&-cell {
			display: flex;
			align-items: center;
			border-top: 1rpx #EDEDED solid;
			padding: 24rpx;

			&:first-child {
				border-top: 0;
			}

			.title {
				flex: 1;
				line-height: 38rpx;
				font-size: 26rpx;
				color: #333333;
				overflow: hidden;

				&.active {
					color: #6D4BBE;
				}
			}

			&.disabled .title {
				color: #999999;
			}

			.action {
				display: block;
				border: 1rpx #E1E1E1 solid;
				padding: 0 22rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				color: #333333;
				border-radius: 99px;
			}
		}
	}

	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}

	.list_box {
		height: 80rpx;
		width: 94%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;

		.tab {
			font-size: 36rpx;
			text-align: center;
			color: #0000009c;
			font-weight: 700;
		}

		.tabSelect {
			font-size: 36rpx;
			color: #000000;
			line-height: 80rpx;
			text-align: center;
			font-weight: 700;
		}
	}
</style>